<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css">
            #bookList {
                border: 1px solid gray;
                border-collapse: collapse;
                width: 640px;
                margin: 4px auto 0;
            } #bookList td, #bookList th {
                border: 1px solid gray;
            } #bookListBody tr.selected {
                background-color: #FFE4C4;
            } #bookListBody td.check {
                text-align: center;
                width: 40px;
            } #bookList th {
                background-color: #D3D3D3;
            }
        </style>
        <script src="../lib/gear5.js">
        </script>
        <script src="../lib/jquery.js">
        </script>
        <script type="text/javascript" src="../../src/javascript/alex.core.js">
        </script>
        <script type="text/javascript" src="../../src/javascript/alex.record.js">
        </script>
        <script type="text/javascript">
            alex.record.config = {
                databases: {
                    "default": {
                        version: 1,
                        displayName: "Default DB",
                        estimatedSize: 1024 * 1024
                    }
                }
            };
            var Book = alex.record.Class({
                tableName: "Book",
                columns: [{
                    name: "id",
                    type: "integer",
                    primaryKey: true,
                    autoIncrement: true
                }, {
                    name: "title",
                    type: "string",
                    notNull: true
                }, {
                    name: "price",
                    type: "integer",
                    notNull: true
                }, {
                    name: "ISBN",
                    type: "string"
                }]
            });
            var selectedRowId;
            
            $(function(){
                function loadBooks(){
                    selectedRowId = null;
                    Book.filter().fetchRecords(function(books, error){
                        if (error) {
                            alert("Error occured when fetch books:" + error.message);
                            return;
                        }
                        var listBody = $("#bookListBody").empty();
                        for (var i = 0; i < books.length; i++) {
                            var book = books[i];
                            var row = ["<tr><td class='check'><input type='checkbox' value='", book.getRowId(), "'></td><td>", book.getTitle(), "</td><td>", book.getPrice(), "</td><td>", book.getISBN() || "", "</td></tr>"];
                            listBody.append(row.join(""));
                        }
                        listBody.find("tr").click(rowSelected);
                    });
                }
                function saveBook(){
                    var title = $("#title").val();
                    var price = $("#price").val();
                    var isbn = $("#isbn").val();
                    if (!title || !price) {
                        alert("title and price is required.");
                        return;
                    }
                    price = parseInt(price, 10);
                    if (!price) {
                        alert("price must be valid integer.");
                        return;
                    }
                    var book = new Book({
                        id: selectedRowId,
                        title: title,
                        price: price,
                        ISBN: isbn
                    });
                    book.save(function(book, error){
                        $("#title, #price, #isbn").val("");
                        seletedRowId = null;
                        $("#bookListBody tr.selected").removeClass("selected");
                        if (error) {
                            alert("Error occured when create book:" + error.message);
                            return;
                        }
                        loadBooks();
                        alert("Success!");
                    });
                }
                function removeBook(){
                    var checked = $("#bookListBody input[type=checkbox]:checked");
                    var removed = 0;
                    checked.each(function(){
                        Book.find(this.value, function(book, error){
                            if (error) {
                                alert("Error occured when find book:" + error.message);
                                return;
                            }
                            book.remove(function(result, error){
                                if (error) {
                                    alert("Error occured when find book:" + error.message);
                                    return;
                                }
                                removed++;
                                if (removed == checked.size()) {
                                    loadBooks();
                                    alert("Success!");
                                    
                                }
                            });
                        });
                    });
                }
                function rowSelected(event){
                    var tr = $(event.currentTarget);
                    if (tr.hasClass("selected")) {
                        tr.removeClass("selected");
                        selectedRowId = null;
                    }
                    else {
                        selectedRowId = tr.find("input[type=checkbox]").val();
                        $("#title").val(tr.find("td:eq(1)").text());
                        $("#price").val(tr.find("td:eq(2)").text());
                        $("#isbn").val(tr.find("td:eq(3)").text());
                        
                        $("#bookListBody tr.selected").removeClass("selected");
                        tr.addClass("selected");
                    }
                }
                Book.createTable(function(result, error){
                    if (error) {
                        alert("Error happend:" + error.message);
                        return;
                    }
                    loadBooks();
                    $("#saveButton").click(saveBook);
                    $("#removeButton").click(removeBook);
                });
                $("#selectAll").click(function(){
                    $("#bookListBody input[type=checkbox]").attr("checked", this.checked);
                });
                $("#dropTableButton").click(function(){
                    Book.dropTable();
                });
            });
        </script>
    </head>
    <body>
        <h1>Book Manager(demo of alex.record)</h1>
        <label for="title">
            Title:
        </label>
        <input type="text" id="title" maxlength="20">
        <label for="price">
            Price:
        </label>
        <input type="text" id="price" maxlength="20">
        <label for="isbn">
            ISBN:
        </label>
        <input type="text" id="isbn" maxlength="20"><input id="saveButton" type="button" value="Save book"><input id="removeButton" type="button" value="Remove book"><input id="dropTableButton" type="button" value="Drop all tables"><hr>
        <table id="bookList">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="selectAll">
                    </th>
                    <th>
                        Title
                    </th>
                    <th>
                        Price
                    </th>
                    <th>
                        ISBN
                    </th>
                </tr>
            </thead>
            <tbody id="bookListBody">
            </tbody>
        </table>
    </body>
</html>
